<template>
  <div>
    <Header :loginState="'toLogin'"></Header>
    <Reload></Reload>

    <section id="page-hero" class="hero py-6">
      <div class="hero-center">
        <!-- breadcrumb Start -->
        <div class="container">
          <div class="row hero-content text-center">
            <div class="col-lg-9 mx-auto">
              <h2>公告</h2>
              <nav
                aria-label="breadcrumb"
                class="d-flex flex-column align-items-center text-center"
              >
                <ol class="breadcrumb mb-0 bg-transparent p-0">
                  <li class="breadcrumb-item">
                    <a class="text-white" href="index.html">返回首页</a>
                  </li>
                  <li class="breadcrumb-item active" aria-current="page">
                    公示
                  </li>
                </ol>
              </nav>
            </div>
          </div>
        </div>
        <!-- breadcrumb End -->
      </div>
      <!-- END HERO-CENTER -->
    </section>
    <!-- END HERO -->

    <!-- BLOG
            ============================================= -->
    <section id="blog" class="blog py-6">
      <div class="container">
        <!-- Title -->
        <div class="section-title text-center">
          <h3 class="sub-title base-color mb-2">News & Events</h3>
          <h2 class="title text-dark">Check out our blog posts</h2>
        </div>

        <div class="blog-section-right-bg">
          <img src="../assets/img/blog-section-right-bg.png" alt="/" />
        </div>

        <div class="blog-section-left-bg">
          <img src="../assets/img/blog-section-left-bg.png" alt="/" />
        </div>

        <div class="row mt-5">
          <!-- Item 01 -->
          <div
            class="col-lg-4 col-md-6 mt-4 wow fadeInUp"
            data-wow-duration="1.25s"
          >
            <!-- BLOG POST IMAGE -->
            <div class="rounded blog-item">
              <div class="image-blog">
                <img
                  src="../assets/img/blog/blog-img-01.jpg"
                  alt="/"
                  class="rounded-top"
                />
              </div>

              <div class="rounded-bottom blog-content p-4 text-center">
                <div class="blog-section-author">
                  <span> Posted by:<a href="#"> Admin </a> </span>
                  |
                  <span> 25th June, 2021</span>
                </div>

                <h5>
                  <a
                    href="blog-single-01.html"
                    target="_blank"
                    class="text-dark"
                    >How to become a successful businessman.</a
                  >
                </h5>
                <div class="blog-link mt-4">
                  <a
                    class="btn btn-sm"
                    href="blog-single-01.html"
                    target="_blank"
                    >Read More</a
                  >
                </div>
              </div>
            </div>
          </div>

          <!-- Item 02 -->
          <div
            class="col-lg-4 col-md-6 mt-4 wow fadeInUp"
            data-wow-duration="1.25s"
            data-wow-delay="0.1s"
          >
            <!-- BLOG POST IMAGE -->
            <div class="rounded blog-item">
              <div class="image-blog">
                <img
                  src="../assets/img/blog/blog-img-02.jpg"
                  alt="/"
                  class="rounded-top"
                />
              </div>
              <div class="rounded-bottom blog-content p-4 text-center">
                <div class="blog-section-author">
                  <span> Posted by:<a href="#"> Admin </a> </span>
                  |
                  <span> 25th June, 2021</span>
                </div>

                <h5>
                  <a
                    href="blog-single-01.html"
                    target="_blank"
                    class="text-dark"
                    >5 Tips to help you in mountain trip</a
                  >
                </h5>
                <div class="blog-link mt-4">
                  <a
                    class="btn btn-sm"
                    href="blog-single-01.html"
                    target="_blank"
                    >Read More</a
                  >
                </div>
              </div>
            </div>
          </div>

          <!-- Item 03 -->
          <div
            class="col-lg-4 col-md-6 mt-4 wow fadeInUp"
            data-wow-duration="1.25s"
            data-wow-delay="0.3s"
          >
            <!-- BLOG POST IMAGE -->
            <div class="rounded blog-item">
              <div class="image-blog">
                <img
                  src="../assets/img/blog/blog-img-03.jpg"
                  alt="/"
                  class="rounded-top"
                />
              </div>
              <div class="rounded-bottom blog-content p-4 text-center">
                <div class="blog-section-author">
                  <span> Posted by:<a href="#"> Admin </a> </span>
                  |
                  <span> 25th June, 2021</span>
                </div>

                <h5>
                  <a
                    href="blog-single-01.html"
                    target="_blank"
                    class="text-dark"
                    >The difference between UX and UI design</a
                  >
                </h5>
                <div class="blog-link mt-4">
                  <a
                    class="btn btn-sm"
                    href="blog-single-01.html"
                    target="_blank"
                    >Read More</a
                  >
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="row mt-5">
          <!-- Item 01 -->
          <div
            class="col-lg-4 col-md-6 mt-4 wow fadeInUp"
            data-wow-duration="1.25s"
          >
            <!-- BLOG POST IMAGE -->
            <div class="rounded blog-item">
              <div class="image-blog">
                <img
                  src="../assets/img/blog/blog-img-01.jpg"
                  alt="/"
                  class="rounded-top"
                />
              </div>

              <div class="rounded-bottom blog-content p-4 text-center">
                <div class="blog-section-author">
                  <span> Posted by:<a href="#"> Admin </a> </span>
                  |
                  <span> 25th June, 2021</span>
                </div>

                <h5>
                  <a
                    href="blog-single-01.html"
                    target="_blank"
                    class="text-dark"
                    >How to become a successful businessman.</a
                  >
                </h5>
                <div class="blog-link mt-4">
                  <a
                    class="btn btn-sm"
                    href="blog-single-01.html"
                    target="_blank"
                    >Read More</a
                  >
                </div>
              </div>
            </div>
          </div>

          <!-- Item 02 -->
          <div
            class="col-lg-4 col-md-6 mt-4 wow fadeInUp"
            data-wow-duration="1.25s"
            data-wow-delay="0.1s"
          >
            <!-- BLOG POST IMAGE -->
            <div class="rounded blog-item">
              <div class="image-blog">
                <img
                  src="../assets/img/blog/blog-img-02.jpg"
                  alt="/"
                  class="rounded-top"
                />
              </div>
              <div class="rounded-bottom blog-content p-4 text-center">
                <div class="blog-section-author">
                  <span> Posted by:<a href="#"> Admin </a> </span>
                  |
                  <span> 25th June, 2021</span>
                </div>

                <h5>
                  <a
                    href="blog-single-01.html"
                    target="_blank"
                    class="text-dark"
                    >5 Tips to help you in mountain trip</a
                  >
                </h5>
                <div class="blog-link mt-4">
                  <a
                    class="btn btn-sm"
                    href="blog-single-01.html"
                    target="_blank"
                    >Read More</a
                  >
                </div>
              </div>
            </div>
          </div>

          <!-- Item 03 -->
          <div
            class="col-lg-4 col-md-6 mt-4 wow fadeInUp"
            data-wow-duration="1.25s"
            data-wow-delay="0.3s"
          >
            <!-- BLOG POST IMAGE -->
            <div class="rounded blog-item">
              <div class="image-blog">
                <img
                  src="../assets/img/blog/blog-img-03.jpg"
                  alt="/"
                  class="rounded-top"
                />
              </div>
              <div class="rounded-bottom blog-content p-4 text-center">
                <div class="blog-section-author">
                  <span> Posted by:<a href="#"> Admin </a> </span>
                  |
                  <span> 25th June, 2021</span>
                </div>

                <h5>
                  <a
                    href="blog-single-01.html"
                    target="_blank"
                    class="text-dark"
                    >The difference between UX and UI design</a
                  >
                </h5>
                <div class="blog-link mt-4">
                  <a
                    class="btn btn-sm"
                    href="blog-single-01.html"
                    target="_blank"
                    >Read More</a
                  >
                </div>
              </div>
            </div>
          </div>
        </div>

        <ul class="post-navigation">
          <li class="active">1</li>
          <li><a href="#">2</a></li>
          <li class="next">
            <a href="#"><i class="lni-chevron-right"></i></a>
          </li>
        </ul>
      </div>
      <!-- End container -->
    </section>
    <!-- END BLOG -->

    <!-- FOOTER
            ============================================= -->
    <footer id="footer" class="container-fluid pt-6 bg-light">
      <!-- FOOTER CONTENT -->
      <div class="row">
        <div class="footer-section-bg-graphics">
          <img src="../assets/img/footer-section-bg.png" alt="/" />
        </div>

        <div class="container">
          <div class="row footer-section">
            <!-- FOOTER Roiton-INFO -->
            <div class="col-lg-3 col-md-6">
              <div class="footer-section-logo">
                <!-- Title -->
                <a href="index.html">
                  <h3 class="base-color">Roiton</h3>
                </a>

                <!-- Text -->
                <p>
                  sed diam nonummy nibh euismod tincidunt aliquam erat volutpat.
                </p>
                <p>
                  Lorem ipsum dolor nibh euismod tincidunt sit amet adipiscing
                  elit, ut laoreet dolore magna aliquam erat volutpat.
                </p>
              </div>
            </div>
            <!-- END FOOTER Roiton-INFO -->

            <!-- FOOTER INFO -->
            <div class="col-lg-3 col-md-6">
              <div class="footer-section-information">
                <!-- Title -->
                <h4>Contact Us</h4>
                <!-- Text -->
                <p>Lorem ipsum dolor sit amet, consectetuer sed volutpat.</p>

                <ul>
                  <li>
                    <span class="base-color lni-map-marker"></span>NewYork,
                    United State
                  </li>
                  <li>
                    <span class="base-color lni-phone"></span>+123-4567-890
                  </li>
                  <li>
                    <span class="base-color lni-envelope"></span
                    ><a href="mailto:" class="text-dark"
                      ><span
                        class="__cf_email__"
                        data-cfemail="eb988a869b878eab988a869b878ec5888486"
                        >[email&#160;protected]</span
                      ></a
                    >
                  </li>
                </ul>
              </div>
            </div>
            <!-- END FOOTER INFO -->

            <!-- FOOTER NEWSLETTER FORM -->
            <div class="col-lg-3 col-md-6">
              <div class="footer-section-newsletter">
                <!-- Title -->
                <h4>Subscribe Us</h4>

                <!-- Text -->
                <p>
                  Stay up to date with our latest news, updates and our new
                  products!
                </p>

                <form action="#" method="get">
                  <button class="newsletter-btn" type="submit">
                    <i class="lni-envelope text-white"></i>
                  </button>
                  <input
                    class="newsletter"
                    type="text"
                    placeholder="mail@example.com"
                  />
                </form>
              </div>
            </div>
            <!-- END FOOTER NEWSLETTER FORM -->

            <!-- FOOTER SOCIAL LINKS -->
            <div class="col-lg-3 col-md-6">
              <div class="footer-section-information">
                <!-- Title -->
                <h4>Social Links</h4>

                <!-- Text -->
                <p>
                  Join our mailing list to stay up to date and get notices about
                  our new releases!
                </p>

                <ul class="social-link list-inline">
                  <li>
                    <a href="#"><i class="lni-facebook-filled"></i></a>
                  </li>
                  <li>
                    <a href="#"><i class="lni-twitter-filled"></i></a>
                  </li>
                  <li>
                    <a href="#"><i class="lni-google-plus"></i></a>
                  </li>
                  <li>
                    <a href="#"><i class="lni-instagram-filled"></i></a>
                  </li>
                </ul>
              </div>
            </div>
            <!-- END SOCIAL LINKS -->
          </div>
        </div>
        <!-- End container -->
      </div>
      <!-- END FOOTER CONTENT -->

      <!-- FOOTER COPYRIGHT -->
      <div class="row footer-copy-right">
        <div class="container">
          <div class="row border-top">
            <div class="col-sm-8 footer-copy-right-text">
              Copyright &copy; 2021.Company name All rights reserved.
            </div>
          </div>
        </div>
      </div>
      <!-- END FOOTER COPYRIGHT -->
    </footer>
    <!-- END FOOTER -->

    <ReturnTop></ReturnTop>
  </div>
</template>

<script>
// 组件
import Header from "../components/Header.vue";
import ReturnTop from "../components/ReturnTop.vue";
import Reload from "../components/Reload.vue";
export default {
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {},
  components: {
    Header,
    ReturnTop,
    Reload,
  },
};
</script>

<style>
</style>
